<template>
  <div class="headerContainer">
    <div class="svgContainer" @click="backRouter">
      <!-- 图标 -->
      <svg
        role="img"
        xmlns="http://www.w3.org/2000/svg"
        width="40px"
        height="40px"
        viewBox="0 0 24 24"
        aria-labelledby="chevronsLeftIconTitle"
        stroke="#545454"
        stroke-width="1.2"
        stroke-linecap="square"
        stroke-linejoin="miter"
        fill="none"
        color="#545454"
      >
        <title id="chevronsLeftIconTitle">Chevron Left</title>
        <polyline points="11 17 6 12 11 7 11 7" />
        <polyline points="17 17 12 12 17 7 17 7" />
      </svg>
    </div>

    <div class="icon">编辑标签</div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";

const router = useRouter();
// 编程式路由 返回上一个
const backRouter = () => {
  router.go(-1);
};
</script>

<style scoped lang="less">
.headerContainer {
  border-radius: 35px 35px 0px 0px;
  background-color: rgb(182, 205, 211);
  padding-left: 15px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  height: 6vh;

  .icon {
    width: 100px;
    margin-left: 50%;
    transform: translate(-95px);
    font-size: 24px;
    line-height: 60px;
  }
}
</style>
